<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo{
				/* 过渡效果,拉长变化过程 */
				transition: all 1s;
				width: 200px;
				height: 200px;
				background-color: #007BFF;
				border-radius: 50%;
				color: #FFF;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			我是胖子
		</div>
		<script>
			// 找标签
			var demo = document.querySelector(".demo")
			
			// 给btn1 添加点击事件
			demo.onmouseenter = function(){
				demo.style.width = "50px"
				demo.style.borderRadius = 0
				demo.innerHTML = "我瘦了"
			}
			// 给btn2 添加点击事件
			demo.onmouseleave = function(){
				demo.style.width = "200px"
				demo.style.borderRadius = "50%"
				demo.innerHTML = "我胖了"
			} 
			
			
			
			/* 
			 1、事件：事件是指在HTML页面的元素上发生的各种事情。事件发生以后的操作，是需要我们自己写的。 
				- 鼠标相关的：点击、鼠标移动
				- 键盘相关的：键盘事件
				- 表单事件：
				- 加载事件：
			 2、JavaScript采用了异步事件驱动编程模型
					同步代码：读一句，执行一句  --- 读下一句，执行下一句 --
					异步代码：可以跳过	读一句，没等指定 --- 读下一句，执行下一句
					
			3、	事件为什么要设计成异步？？？？
			
			4、发生了事件，我们可以有多个操作的代码。实际情况，我们学习的，发生事件以后，只有一个操作的代码。
			
			5、事件处理的代码怎么写：
				三要素：
					事件目标：哪个标签的事件
					事件类型：是哪一种事件
					事件处理程序（函数） ： 事件发生之后，要执行的代码
			 */
		</script>
	</body>
</html>
